import React from 'react';
import { Modal, Form, Input } from 'antd';
import { email, mobile } from 'configs/rules';
import { AutoSearch } from 'components/common';
import { getList } from 'services/company';


const FormItem = Form.Item;

class AddModal extends React.Component {
  constructor (props) {
    super(props);
    this.state = {};
    this.onOK = this.onOK.bind(this);
  }

  componentDidMount(){
    const { getUser, record } = this.props;
    record.id && getUser({ name: record.name });
  }

  onOK () {
    const { onOK, form, onCancel, record, getList } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        onOK({ ...values, id: record.id }).then(() => {
          onCancel();
          getList();
        });
      }
    });
  }

  render () {
    const { 
      onCancel, 
      form,
      loading, 
      record = {},
      details,
      roleList,
      companyList,
      getRoleList,
      getCompanyList
   } = this.props;
    const { getFieldDecorator } = form;
    const modalOpts = {
      confirmLoading: loading,
      title: `${record.id ? '编辑' : '新增'}用户`,
      width: 500,
      visible: true,
      maskClosable: false,
      okText: '确定',
      cancelText: '取消',
      onOk: this.onOK,
      onCancel
    };
    const formItemLayout = {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 18
      }
    };
    const companyProps = {
      preSearch: true,
      placeholder: '请选择公司名称',
      preFetchList: getCompanyList,
      dataSource: companyList,
      fetchList: getList,
      result: data => data.data.data,
      searchKey: 'name',
      keys: ['name']
    };
    const roleProps = {
      preSearch: true,
      placeholder: '请选择角色',
      preFetchList: getRoleList,
      dataSource: roleList,
      searchKey: 'name',
      keys: ['name']
    };
    return (
      <Modal {...modalOpts}>
        <Form>
          <FormItem
            label='用户名'
            {...formItemLayout}
          >
            {
              getFieldDecorator('name', {
                initialValue: details.user.name || '',
                rules: [{ required: true, message: '请填写用户名' }]
              })(
                <Input
                  maxLength={30}
                  placeholder='用户名'
                  disabled={!!record.id}
                />
              )
            }
          </FormItem>
          <FormItem
            label='用户别名'
            {...formItemLayout}
          >
            {
              getFieldDecorator('username', {
                initialValue: details.user.username || '',
                rules: [{ required: true, message: '请填写用户别名' }]
              })(
                <Input
                  maxLength={30}
                  placeholder='用户别名'
                />
              )
            }
          </FormItem>
          <FormItem
            label='手机号'
            {...formItemLayout}
          >
            {
              getFieldDecorator('phone', {
                initialValue: details.user.phone || '',
                rules: [
                  { required: true, message: '请填写手机号' },
                  mobile
                ]
              })(
                <Input
                  maxLength={30}
                  placeholder='手机号'
                />
              )
            }
          </FormItem>
          <FormItem
            label='公司名称'
            {...formItemLayout}
          >
            {
              getFieldDecorator('companyId', {
                initialValue: details.user.companyId || '',
                rules: [
                  { required: true, message: '请选择公司名称' }
                ]
              })(
                <AutoSearch {...companyProps} />
              )
            }
          </FormItem>
          <FormItem
            label='角色'
            {...formItemLayout}
          >
            {
              getFieldDecorator('roleId', {
                initialValue: details.user.roleId || '',
                rules: [
                  { required: true, message: '请选择角色' }
                ]
              })(
                <AutoSearch {...roleProps} />
              )
            }
          </FormItem>
          <FormItem
            label='邮箱'
            {...formItemLayout}
          >
            {
              getFieldDecorator('email', {
                initialValue: details.user.email || '',
                rules: [
                  { required: true, message: '请填写邮箱' },
                  email
                ]
              })(
                <Input
                  maxLength={30}
                  placeholder='邮箱'
                />
              )
            }
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(AddModal);
